<template>
  <div class="main" ref="bigbox">
    <div class="serbox">
      <div class="inp">
        <el-input placeholder="请输入提现人姓名" v-model="searchText">
        </el-input>
      </div>
      <el-select v-model="status" placeholder="请选择提现状态" clearable>
        <el-option label="申请中" value="0"></el-option>
        <el-option label="提现成功" value="1"></el-option>
        <el-option label="拒绝" value="2"></el-option>
      </el-select>
      <el-button
        type="primary"
        style="margin-left: 15px"
        size="medium"
        @click="search"
        >查询</el-button
      >
    </div>
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column label="金额">
          <template slot-scope="scope">
            <span style="color: #d94511">￥{{ scope.row.money }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="typeText" label="提现方式"> </el-table-column>
        <el-table-column prop="card" label="提现账号"> </el-table-column>
        <el-table-column prop="statusText" label="状态"> </el-table-column>
        <el-table-column prop="createAt" label="创建时间"> </el-table-column>
        <!-- <el-table-column label="操作"
                         width="60">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)"
                       type="text"
                       size="small">详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="page">
      <div class="btns">
        <!-- <el-button type="primary"
                   @click="chodel">批量删除</el-button> -->
      </div>
      <el-pagination
        background
        @current-change="changePage"
        :current-page.sync="page"
        :page-size="pageSize"
        layout="total,prev,pager,next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog title="开票详情" :visible.sync="pop" width="50%">
      <el-form label-width="80px" :model="popform">
        <el-form-item label="流水号">
          <el-input v-model="popform.orderSn" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="popform.time" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="popform.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="popform.money" disabled></el-input>
        </el-form-item>
        <el-form-item label="提现方式">
          <el-input v-model="popform.type" disabled></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="popform.status" disabled></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: "",
      searchText: "",
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      pop: false,
      popform: {
        orderSn: "12345678910",
        time: "2020-12-05 18:05:50",
        name: "商品名称",
        type: "微信提现",
        money: "52.00",
        status: "已完成",
      },
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    // 获取列表
    getlist() {
      this.$postRequest("/mall/shopExtract/list", {
        shopId: sessionStorage.getItem("shopId"),
        pageNum: this.page,
        pageSize: this.pageSize,
        name: this.searchText,
        status: this.status,
      }).then((res) => {
        this.total = res.total;
        for (var i = 0; i < res.rows.length; i++) {
          res.rows[i].createAt = this.$util.gettime(
            new Date(res.rows[i].createAt)
          );
          if (res.rows[i].status == 0) {
            res.rows[i].statusText = "提现中";
          } else if (res.rows[i].status == 1) {
            res.rows[i].statusText = "同意提现";
          } else if (res.rows[i].status == 2) {
            res.rows[i].statusText = "已被拒绝";
          }
          if (res.rows[i].type == 0) {
            res.rows[i].typeText = "微信";
          } else if (res.rows[i].type == 1) {
            res.rows[i].typeText = "支付宝";
          } else if (res.rows[i].type == 2) {
            res.rows[i].typeText = "银行卡";
          }
        }
        this.tableData = res.rows;
      });
    },
    search() {
      this.page = 1;
      this.getlist();
    },
    changePage(e) {
      this.$refs.bigbox.parentElement.scrollTo(0, 0);
      this.getlist();
    },
    handleClick() {
      this.pop = true;
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell,
/deep/ .el-table .cell {
  text-align: center;
}
/deep/ .el-button--primary {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-button--text {
  color: #0655ce;
}
/deep/ .el-input.is-disabled .el-input__inner {
  color: #333;
}
.main {
  margin: 20px;
  background: #fff;
}
.serbox {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  .inp {
    width: 200px;
    margin-right: 20px;
  }
}
.table {
  margin: 20px;
  border: 1px solid #eee;
  .img {
    height: 50px;
    width: 50px;
  }
}
.page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.popimg {
  height: 120px;
  width: 120px;
}
</style>